<!-- 博客广场列表页 可以查看全部博文 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客广场</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">-->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_lists.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav">

    <!-- <img src="image/img1.jpg" alt="加载失败" > -->
    <img src="image/img1.jpg" alt="图片加载失败">
    <span class="title">筱的博客</span>

    <a href="blog_list.html">个人主页</a>

    <!-- 此标签用于占位 分隔 -->
        <div class="spacer" style="width: 210px"></div>
    <div id="sort" style="width: 250px">
        <select id="sortsel" style="height: 30px; border-radius: 5px; background-color: rgba(201,201,202,0.6); margin-left: 3px" >
            <option selected="selected">发文日期(降序)</option>
            <option>发文日期(升序)</option>
            <option>文章浏览量(降序)</option>
            <option>文章浏览量(升序)</option>
            <option>文章获赞数(降序)</option>
            <option>文章获赞数(升序)</option>
            <option>文章评论数(降序)</option>
            <option>文章评论数(升序)</option>
            <option>文章收藏数(降序)</option>
            <option>文章收藏数(升序)</option>
        </select>
        <button id ="sortbutton" style=" width: 50px;height: 30px;padding-top: 2px ; color: #0f0f0f ;border-color: #0f0f0f;">排序</button>
    </div>
    <div id="search" style="height: 35px; margin-right: 320px ; margin-bottom: 2px">
        <input  id="info" type="text" placeholder="&nbsp;在此处搜索指定文章" name="search" >
        <select id="sel" style="height: 30px; border-radius: 5px; background-color: rgba(201,201,202,0.6); margin-left: 3px" >
            <option selected="selected">文章标题</option>
            <option>作者名</option>
        </select>
        <button id ="button" style="height: 30px;padding-top: 2px ; color: #0f0f0f ;border-color: #0f0f0f;">搜索</button>
        <button id ="return" class="none" style="height: 30px;padding-top: 2px ; color: #0f0f0f ;border-color: #0f0f0f; ">返回</button>
    </div>
    <!-- 浏览页有写博客和注销 -->
    <!--    <a href="blog_edit.html">写博客</a>-->
    <!-- 跳转到对应后台 实现删除 会话里的值 -->
    <!--    <a href="user/logout">注销</a>-->
    <!--    单击执行 logout方法-->
    <a href="javascript:logout()">注销</a>
</div>

<!-- 页面主体 -->
<div class="container">
    <!-- 左侧信息 其他页面可以复用-->
    <div class="container-left">

        <!-- .card 盒子 表示用户信息 -->
        <div class="card">
            <img src="" alt="">
            <!-- <h3>筱</h3> -->
            <!-- 根据用户 设定用户名 -->
            <h3></h3>

            <!--             隐藏的用户状态-->
            <span class="state" style="display: none"></span>
            <div class="counter">
                <span>文章数</span>
                <span>获赞数</span>
            </div>

            <div class="counter">
                <span class="count"></span>
                <span class="likecount"></span>
            </div>
        </div>
    </div>

    <!-- 页面博文 展示 动态添加博文 -->
    <div class="container-right">
        <!-- 显示火花图标 -->


    </div>

</div>
<!-- 引入jquery源码 -->
<script src="js/jquery.js"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>-->
<!-- 向后端发起请求获取全部博文josn对象 -->


<script>
    let sortoption=0;
    function get_sort_option(){
        // 设置排序选项
        let sortvalue= document.querySelector("#sortsel");
        if(sortvalue.value=="发文日期(降序)")return 1;
        if(sortvalue.value=="发文日期(升序)")return 2;
        if(sortvalue.value=="文章浏览量(降序)")return 3;
        if(sortvalue.value=="文章浏览量(升序)")return 4;
        if(sortvalue.value=="文章获赞数(降序)")return 5;
        if(sortvalue.value=="文章获赞数(升序)")return 6;
        if(sortvalue.value=="文章评论数(降序)")return 7;
        if(sortvalue.value=="文章评论数(升序)")return 8;
        if(sortvalue.value=="文章收藏数(降序)")return 9;
        if(sortvalue.value=="文章收藏数(升序)")return 10;
    }

    let sortbutton=document.querySelector("#sortbutton");
    sortbutton.onclick=function (){
        sortoption=get_sort_option();
        getContent(pindex,psize,sortoption);
    }

    // 分页显示博文
    function showarticlebypage(pin,psi,sortop) { // 分页显示信息 在后面获取最大博文数后再调用

        $.ajax({
            type: 'post',
            url: 'article/showblogs',
            data: {"pindex": pin, "psize": psi,"sortoption": sortop},

            success: function (body) {

                // data里是json数组对象接受的是ajax解析的服务器发送过来的josn数组字符串


                let blogContainer = document.querySelector('.container-right');
                for (let blog of body.data) {
                    // 创建一个blog 盒子 应用设置好的blog类标签
                    let blogDiv = document.createElement('div');
                    blogDiv.className = 'blog';

                    let titleDiv = document.createElement('div');
                    titleDiv.className = 'title';
                    titleDiv.innerHTML = blog.title;
                    blogDiv.appendChild(titleDiv);


                    let dateDiv = document.createElement('div');
                    dateDiv.className = 'date';
                    dateDiv.innerHTML = "发文日期:" + blog.updatetime;
                    blogDiv.appendChild(dateDiv);

                    let desc = document.createElement('div');
                    desc.className = 'msg';
                    let authorDiv = document.createElement('span');
                    authorDiv.className='author';
                    authorDiv.innerHTML="作者:"+blog.username;
                    desc.appendChild(authorDiv);


                    let rcountDiv = document.createElement('span');
                    rcountDiv.className = 'rcount';
                    rcountDiv.innerHTML = "阅读量: " + blog.rcount;
                    desc.appendChild(rcountDiv);

                    let likedDiv = document.createElement('span');
                    likedDiv.className = 'likedcount';
                    likedDiv.innerHTML = "获赞数:" + blog.likedcount;
                    desc.appendChild(likedDiv);

                    let collection = document.createElement('span');
                    collection.className='collected';
                    collection.innerHTML="收藏数: "+blog.collection_count;
                    desc.appendChild(collection);
                    // 评论
                    let commentcount=document.createElement('span');
                    commentcount.className='commentcount';
                    commentcount.innerHTML="评论数: "+blog.commentcount;
                    desc.appendChild(commentcount);
                    blogDiv.appendChild(desc);



                    let descDiv = document.createElement('div');
                    descDiv.className = 'desc';
                    descDiv.innerHTML = blog.description;

                    let  description = document.createElement('div');
                    description.appendChild(descDiv)
                    description.className='description';
                    blogDiv.appendChild(description);

                    let a = document.createElement('a');
                    //  访问详情页时带上当前博文标签 对应公共详情页
                    a.href = "blogs_detail.html?id=" + blog.id;
                    a.innerHTML = '查看全文&gt;&gt;';
                    blogDiv.appendChild(a);
                    let stateDiv = document.querySelector('.card .state');
                    if(stateDiv.innerHTML==2){
                        let del = document.createElement('button');
                        del.className='del';
                        del.innerHTML='删除博文';
                        del.onclick=function (){
                            if(confirm('你确定要删除该博文嘛?')){
                                $.ajax({
                                    url:"article/delbyadmin",
                                    type:"post",
                                    data:{"id":blog.id,
                                        "state":1},
                                    success:function (body){
                                        if(body!=null&&body.code==200){
                                            alert('删除成功!');
                                            location.assign('blog_lists.html');
                                        }else{
                                            alert('删除失败!');
                                            location.assign('blog_lists.html');
                                        }
                                    }
                                });
                            }else{
                                return;
                            }

                        }
                        blogDiv.appendChild(del);
                    }

                    // let fire=document.createElement('span');
                    // fire.innerHTML=;

                    // blogDiv.appendChild(fire);
                    let heat= document.createElement('div');
                    heat.className="heat";
                    heat.innerHTML= '<svg id="fire"t="1711613191612" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4629" width="20" height="20"><path d="M336 972.8c-60.8-128-28.8-201.6 19.2-268.8 51.2-76.8 64-150.4 64-150.4s41.6 51.2 25.6 134.4c70.4-80 83.2-208 73.6-256 160 112 230.4 358.4 137.6 537.6 492.8-281.6 121.6-700.8 57.6-745.6 22.4 48 25.6 128-19.2 166.4-73.6-281.6-256-336-256-336 22.4 144-76.8 300.8-172.8 419.2-3.2-57.6-6.4-96-38.4-153.6-6.4 105.6-86.4 188.8-108.8 294.4C89.6 758.4 140.8 860.8 336 972.8L336 972.8z" p-id="4630" fill="#d81e06"></path></svg>'+'文章热度:'+blog.heat;

                    blogDiv.appendChild(heat);
                    blogContainer.appendChild(blogDiv);

                }


                let pageinfo = document.createElement('div');
                pageinfo.className = 'pageinfo';
                // console.log(blogContainer);
                // console.log(pageinfo);
                let homepage = document.createElement('button');
                let prevpage = document.createElement('button');
                let nextpage = document.createElement('button');
                let endpage = document.createElement('button');


                homepage.className = 'homepage';
                prevpage.className = 'prevpage';
                nextpage.className = 'nextpage';
                endpage.className = 'endpage';

                homepage.innerHTML = '首页';
                prevpage.innerHTML = '上一页';
                nextpage.innerHTML = '下一页';
                endpage.innerHTML = '尾页';
                //  显示 当前页码 和最大页码信息
                let pagemessage = document.createElement('span');
                pagemessage.className = 'pagemessage';
                pagemessage.innerHTML = '&nbsp当前在第' + pindex + '页 , 共' + pagemax + '页'
                pageinfo.appendChild(pagemessage);


                pageinfo.appendChild(homepage);
                pageinfo.appendChild(prevpage);
                pageinfo.appendChild(nextpage);
                pageinfo.appendChild(endpage);
                blogContainer.appendChild(pageinfo);
                let jump1=document.createElement('span');
                jump1.className='jump';
                jump1.innerHTML='&nbsp&nbsp跳转到第&nbsp';
                let jumppage=document.createElement('input');
                let jump2=document.createElement('span');
                jump2.innerHTML='&nbsp页';
                let jumpbutton=document.createElement('button');
                jumpbutton.innerHTML='跳转';
                jumpbutton.className='jumpbutton';
                pageinfo.appendChild(jump1);

                pageinfo.appendChild(jumppage);
                pageinfo.appendChild(jump2);
                pageinfo.appendChild(jumpbutton);

                jumpbutton.onclick=function(){
                    let page=jumppage.value;
                    console.log(page);
                    if(!isNumeric(page)){
                        alert('请输入正确的数字!');
                        return;
                    }else{
                        if(page>pagemax||page<=0){
                            alert('页码超过范围!');
                            return;
                        }
                        pindex=parseInt(page);
                        getContent(pindex,psize,sortoption);
                    }
                }

                function isNumeric(str) {
                    // 使用正则表达式匹配数字
                    var numericPattern = /^[0-9]+$/;
                    return numericPattern.test(str);
                }
                // 单击首页
                homepage.onclick = function () {
                    if (pindex == 1) {
                        alert("当前已经在首页了哦~");
                        return;
                    }
                    pindex=1;
                    //location.assign("blog_lists.html"+"?sortoption="+sortoption+"&index=" +1);
                    getContent(1,psize,sortop);
                }
                //单击上一页
                prevpage.onclick = function () {
                    if (pindex == 1) {
                        alert("不能再点了,已经是第一页了~");
                        return;
                    }
                    pindex-=1;
                    //location.assign("blog_lists.html" +"?sortoption="+sortoption+"&index=" + (pindex - 1));
                    getContent(pindex,psize,sortoption);
                }

                //单击下一页
                nextpage.onclick = function () {
                    if (pindex == pagemax) {
                        alert("不能再点了,已经是最后一页了~");
                        return;
                    }
                    pindex+=1;
                    //location.assign("blog_lists.html" +"?sortoption="+sortoption+"&index=" + (pindex + 1));
                    getContent(pindex,psize,sortoption);
                }


                endpage.onclick = function () {
                    if (pindex == pagemax) {
                        alert("当前已经在尾页了哦~");
                        return;
                    }
                    pindex=pagemax;
                    //location.assign("blog_lists.html" + "?sortoption="+"&index=" + pagemax)
                    getContent(pagemax,psize,sortop);
                }
            }
        }
        );
    }
    <!-- 获取 当前最大页码 传入每页最大博文数 进行判断-->
    let pagemax = -1;
    let psize = 3;
    let index = 1;


    // 如果querystring有内容 则截取其 页码 进行赋值
    if (location.search != null) {
        index = location.search.substring(20);
        //如果截取的内容是负数 则纠正为首页页码1
        if (index < 1) {
            index = 1;
        }
    }
    let pindex = parseInt(index);

    function delarticle(){
        let blogContainer = document.querySelector('.container-right');
        //  遍历删除所有子元素文章
        for(let i=blogContainer.childElementCount-1;i>=0;i--){
            blogContainer.removeChild(blogContainer.children[i]);
        }
    }
    //  获取正文  先内部获取页码再获取正文
    function getContent( pin, psiz,sortop){
        if(pagemax==-1){
            $.ajax({
                type: "POST",
                data: {"psize": psize},
                url: "/article/getpagemax",
                success: function (body) {
                    if (body != null && body.data != null) {
                        pagemax = body.data;

                        //以下是获取到最大页码才能执行的操作 , 响应是异步的,必须获取到数据才能进行操作
                        //  重置非法页码
                        if (pindex > pagemax) {
                            pindex = pagemax;
                        }

                        //  先获取最大页码再进行分页获取博文
                        delarticle();
                        showarticlebypage(pin,psiz,sortop);
                    }
                }
            });
        }else{
            delarticle();
            showarticlebypage(pin,psiz,sortop);
        }

    }



    // 获取登录状态 同时设置左侧用户信息
    let getLogin = function () {
        // 获取 个人信息
        $.ajax({
            type: 'get',
            url: '/user/showuser',
            success: function (body) {
                // 状态码为200 且有数据 即获取到了个人信息
                if (body != null && body.code == 200 && body.data != null) {
                    let profile=document.querySelector('.card img');
                    profile.src=body.data.photo;
                    let username = document.querySelector('.card h3');
                    username.innerHTML = body.data.username;
                    let count = document.querySelector('.counter .count');
                    count.innerHTML = body.data.blogCount;
                    let likecount = document.querySelector('.likecount');
                    likecount.innerHTML = body.data.liked;
                    let stateDiv=document.querySelector('.card .state');
                    stateDiv.innerHTML = body.data.state;
                    getContent(pindex,psize,sortoption);
                } else {
                    alert("操作异常:" + body.msg);
                    location.assign('blog_login.html');
                }
            }
        });
    };
    getLogin();





    let rel=document.querySelector('#search #info');
    let info=document.querySelector('#info');
    let sc=document.querySelector('#search #button');
    let select=document.querySelector('#sel');


    let r =document.querySelector('#return');
    r.onclick=function (){
        location.assign('blog_lists.html');
    }
    // 搜索功能  按文章标题 或作者名
    sc.onclick= function () {

        if(r.className=='none'){
            r.className='';
        }
        let option;
        if(select.value=='文章标题'){
            option="title";
        }
        if(select.value=='作者名'){
            option="username";
        }
        //  搜索为空 则为返回 分页显示
        if(rel.value==''){
            location.assign('blog_lists.html')
            return;
        }

        $.ajax({
            url: "/article/search",
            type: "post",
            data: {
                "option":option,
                "title": rel.value
            },
            success: function (body) {
                if(body==null||body.data==null){
                    alert('操作异常');
                    location.assign('blog_lists.html');

                }
                let blogContainer = document.querySelector('.container-right');
                //  遍历删除所有子元素文章
                for(let i=blogContainer.childElementCount-1;i>=0;i--){
                    blogContainer.removeChild(blogContainer.children[i]);
                }


                for (let blog of body.data) {
                    // 创建一个blog 盒子 应用设置好的blog类标签
                    let blogDiv = document.createElement('div');
                    blogDiv.className = 'blog';

                    let titleDiv = document.createElement('div');
                    titleDiv.className = 'title';
                    titleDiv.innerHTML = blog.title;
                    blogDiv.appendChild(titleDiv);


                    let dateDiv = document.createElement('div');
                    dateDiv.className = 'date';
                    dateDiv.innerHTML = "发文日期:" + blog.updatetime;
                    blogDiv.appendChild(dateDiv);

                    let desc = document.createElement('div');
                    desc.className = 'msg';

                    let authorDiv = document.createElement('div');
                    authorDiv.className='author';
                    authorDiv.innerHTML="作者:"+blog.username;
                    desc.appendChild(authorDiv);

                    let rcountDiv = document.createElement('div');
                    rcountDiv.className = 'rcount';
                    rcountDiv.innerHTML = "阅读量: " + blog.rcount;
                    desc.appendChild(rcountDiv);

                    let likedDiv = document.createElement('div');
                    likedDiv.className = 'likedcount';
                    likedDiv.innerHTML = "获赞数:" + blog.likedcount;
                    desc.appendChild(likedDiv);

                    let collection = document.createElement('span');
                    collection.className='collected';
                    collection.innerHTML="收藏数: "+blog.collection_count;
                    desc.appendChild(collection);
                    // 评论
                    let commentcount=document.createElement('div');
                    commentcount.className='commentcount';
                    commentcount.innerHTML="评论数: "+blog.commentcount;
                    desc.appendChild(commentcount);

                    blogDiv.appendChild(desc);
                    let descDiv = document.createElement('div');
                    descDiv.className = 'desc';
                    descDiv.innerHTML = blog.description;

                    let  description = document.createElement('div');
                    description.appendChild(descDiv)
                    description.className='description';
                    blogDiv.appendChild(description);


                    let a = document.createElement('a');
                    //  访问详情页时带上当前博文标签 对应公共详情页
                    a.href = "blogs_detail.html?id=" + blog.id;
                    a.innerHTML = '查看全文&gt;&gt;';
                    blogDiv.appendChild(a);

                    let stateDiv = document.querySelector('.card .state');

                    if(stateDiv.innerHTML==2) {
                        let del = document.createElement('button');
                        del.className = 'del';
                        del.innerHTML = '删除博文';
                        del.onclick = function () {
                            if (confirm('你确定要删除该博文嘛?')) {
                                $.ajax({
                                    url: "article/delbyadmin",
                                    type: "post",
                                    data: {
                                        "id": blog.id,
                                        "likedNum": blog.likedcount,
                                        "state": 1
                                    },
                                    success: function (body) {
                                        if (body != null && body.code == 200) {
                                            alert('删除成功!');
                                            location.assign('blog_lists.html');
                                        } else {
                                            alert('删除失败!');
                                            location.assign('blog_lists.html');
                                        }
                                    }
                                });
                            } else {
                                return;
                            }
                        }
                        blogDiv.appendChild(del);
                    }
                    let heat= document.createElement('div');
                    heat.className="heat";
                    heat.innerHTML= '<svg id="fire"t="1711613191612" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4629" width="20" height="20"><path d="M336 972.8c-60.8-128-28.8-201.6 19.2-268.8 51.2-76.8 64-150.4 64-150.4s41.6 51.2 25.6 134.4c70.4-80 83.2-208 73.6-256 160 112 230.4 358.4 137.6 537.6 492.8-281.6 121.6-700.8 57.6-745.6 22.4 48 25.6 128-19.2 166.4-73.6-281.6-256-336-256-336 22.4 144-76.8 300.8-172.8 419.2-3.2-57.6-6.4-96-38.4-153.6-6.4 105.6-86.4 188.8-108.8 294.4C89.6 758.4 140.8 860.8 336 972.8L336 972.8z" p-id="4630" fill="#d81e06"></path></svg>'+'文章热度:'+blog.heat;
                    blogDiv.appendChild(heat);
                    blogContainer.appendChild(blogDiv);
                }
            }
        });
    };
    function logout() {
        if (confirm("您确定要退出登录嘛?")) {
            $.ajax({
                url: "/user/logout",
                type: "post",
                contentType: "application/json",
                data: {},
                success: function (rel) {
                    // rel=JSON.parse(rel);

                    if (rel.code==200) {
                        alert("Bye~");
                        location.assign("blog_login.html");
                    }
                }
            });
        }

    }

</script>

</body>
</html>